<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和反选</title>

    <script>
        window.onload = function () {
            var CHECKEDBOX_NUM = 10;
            var bottom = document.getElementById("bottom");
            for (var i = 0; i < CHECKEDBOX_NUM; i++) {
                bottom.innerHTML += "<p>选项"+i+":<input type='checkbox'></p>"
            }

            var inputs = bottom.getElementsByTagName("input");
            var btns = document.getElementById("top").getElementsByTagName("button");
            btns[0].onclick = function () {
                toggle(inputs,true);
            }

            btns[1].onclick = function () {
                toggle(inputs,false);
            }

            btns[2].onclick = function () {
                for (var i = 0; i < inputs.length; i++) {
                    var obj = inputs[i];
                    obj.checked = !obj.checked;
                }
            }
        }

        function toggle(arrays, flag) {
            for (var i = 0; i < arrays.length; i++) {
                var obj = arrays[i];
                obj.checked = flag;
            }
        }
    </script>
</head>
<body>
    <div id="top">
        <button>全选</button>
        <button>全不选</button>
        <button>反选</button>
    </div>
<div id="bottom">
</div>
</body>
</html>